<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure CSS Real Rain</title>
  <link rel="stylesheet" href="rainfallAnimation.css">
</head>
<body>
  <div class="rain">
    <span style="--x:10; --s:1;"></span>
    <span style="--x:15; --s:0.7;"></span>
    <span style="--x:20; --s:1.2;"></span>
    <span style="--x:25; --s:0.9;"></span>
    <span style="--x:30; --s:0.8;"></span>
    <span style="--x:35; --s:1.1;"></span>
    <span style="--x:40; --s:0.6;"></span>
    <span style="--x:45; --s:1.3;"></span>
    <span style="--x:50; --s:1;"></span>
    <span style="--x:55; --s:0.8;"></span>
    <span style="--x:60; --s:1.1;"></span>
    <span style="--x:65; --s:0.9;"></span>
    <span style="--x:70; --s:1.2;"></span>
    <span style="--x:75; --s:0.7;"></span>
    <span style="--x:80; --s:1;"></span>
    <span style="--x:85; --s:0.8;"></span>
    <span style="--x:90; --s:1.2;"></span>
    <span style="--x:95; --s:0.9;"></span>
  </div>
</body>
</html>
